// stylelint-disable declaration-no-important

// Contextual backgrounds

@mixin bg-variant($parent, $color, $ignore-warning: false) {
  #{$parent} {
    background-color: $color !important;
    // We need this to avoid gray on gray
    @if $color == $dark {
      color: $white;
    }
    @else {
      color: $dark;
    }
  }

  a#{$parent},
  button#{$parent} {
    @include hover-focus() {
      background-color: $color !important;
    }
  }
}

@mixin bg-gradient-variant($parent, $color) {
  #{$parent} {
    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
    @if $color == $light {
      color: $dark;
    }
    @if $color == $dark {
      color: $white;
    }
  }
}
